@import 'css/config.scss';

.video-library {
    height: 100%;
    padding-top: 24px;
    padding-left: 0px;
    padding-right:0px;
    padding-bottom: 0;

    .library-top {
        .library-top-title {
            font-family: Alibaba PuHuiTi 3.0;
            font-size: 34px;
            font-weight: bold;
            line-height: 48px;
            letter-spacing: normal;
            color: #FFFFFF;
            margin-bottom: 20px;
            position: relative;
            width:100%;
            span{
                display: block;
                  color: #8F91A8;
            };
            .top-right-logo{
                position: absolute;
                top: 0px;
                right: 0px;
            }
        }
        .library-top-select-line {
            display: flex;
            gap: 4px;
            margin-bottom: 48px;
            .library-top-select-line-item {
                width: calc(50% - 2px);
                height: 110px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                // padding: 32px;
                gap: 8px;
                background: #17171B;
                cursor: pointer;
                border-radius: 8px;
                position:relative;
                overflow: hidden;

                .library-top-select-line-item-title {
                    font-family: Roboto;
                    font-size: 20px;
                    font-weight: 800;
                    line-height: 28px;
                    letter-spacing: normal;
                    color: #F0F0F0;
                    position: absolute;
                    top:21px;
                    left:31px;
                    z-index: 2;
                    width: 100%;

                }
                .arrow-item {
                    position: absolute;
                    left:31px;
                    top: 61px;
                    z-index: 2;
                    width: 48px;
                    height: 28px;
                    padding: 4px 12px 4px 16px;
                    background: rgba(255,255,255,0.3);
                    border-radius: 14px;
                    transition: all 0.3s ease;
                    display: flex;
                    align-items: center;
                    p{
                        width: 0px;
                        white-space: nowrap;
                        overflow: hidden;
                        color: #000;
                        font-family: Roboto;
                        font-size: 12px;
                        font-weight: 500;
                        line-height: 16px;
                        letter-spacing: normal;
                        color: #000000;
                        transition: all 0.3s ease;
                    }
                    svg {
                        path {
                            transition: all 0.3s ease;
                        }
                    }
                    

                }
                .bg {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    z-index: 1;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        object-position: right;
                    }
                }

                &:hover {
                    .arrow-item {
                        width: 100px;
                        background: rgba(255,255,255,1);
                         p {
                            width: 52px;
                            }
                        svg path {
                            fill: #000;

                        }
                    }
                }

            }
        }
        .library-history-title-filter-buttons {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
        }

        .library-history-title {
            font-family: Roboto;
            font-size: 20px;
            font-weight: 500;
            line-height: 24px;
            letter-spacing: normal;
            color: #FFFFFF;
            // margin-bottom: 20px;
        }
        .filter-buttons {
            display: flex;
            gap: 8px;
            // margin-bottom: 28px;
            .filter-button {
                font-family: Roboto;
                font-size: 12px;
                font-weight: 500;
                line-height: 14px;
                height: 30px;
                justify-content: center;
                align-items: center;
                padding: 8px 20px;
                background: #101115;
                cursor: pointer;
                border-radius: 4px;
                color: #8F91A8;
                &.active {
                    background: #33333A;
                    color: #FFFFFF;
                }
            }
        }

    }

    .video-library-top-buttons {
        margin-bottom: 20px;
        display: flex;
        .video-library-top-buttons-item {
            cursor: pointer;
            height: 34px;
            display: flex;
            align-items: center;
            padding: 4px 8px;
            gap: 4px;
            border-radius: 2px;
            background: #100F11;
            color: $gray;
            margin-right: 2px;

            &.video-library-top-buttons-item-active {
                color: $primary-color;
                svg path{
                    fill: $primary-color;

                }
            }
        }
    }

    .video-library-thumbnail {
       max-height: calc(100vh - 340px);
        height: auto;            
        overflow: scroll;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        .video-library-thumbnail-item {
            width: calc( (100% - 20px) / 6);
            padding-bottom: 15%; /* 16:9 比例 (9/16=0.5625) */
            height: 0;
            overflow: hidden;
            background: #100F11;
            position: relative;
            cursor: pointer;
            border-radius: 4px;
            .lazy-render-img {
                position: absolute;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            video {
                position: absolute;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .play-icon {
                position: absolute;
                width: 24px;
                height: 24px;
                bottom: 12px;
                left: 12px;
            }

            &:hover {
                .button-download-lick-delete-list{
                    opacity: 1;

                    &.islike {
                        max-width: 112px;
                        .delete-btn,.download-btn {
                            display: block;
                            width: 24px;
                        }
                    }
                }
            }

        }
        
    }

    .video-library-content {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100%;

        .video-library-list,.video-pic-list {
            
            display: flex;
            flex-direction: column;
        }

        .video-library-list {
            flex: 1;
            height: 100%;
            overflow: scroll;
            .video-library-list-item {
                display: flex;
                gap: 12px;
                margin-bottom: 20px;

                
                .video-library-videocontainer {
                    width: 70%;
                    
                    position: relative;
                    display: flex;
                    flex-wrap: wrap; /* 允许换行 */
                    gap: 4px;
                    // border-radius: 4px;
                    .video-library-videocontainer-video {
                        // height: 340px;
                        // padding-bottom: 42.56%; /* 16:9 比例 (9/16=0.5625) */
                        // height: 0;
                        height:auto;
                        overflow: hidden;
                        background: #100F11;
                        position: relative;
                        border-radius: 4px;

                        &[class*="9:16"] {
                            aspect-ratio: 9 / 16;
                            
                        }
                        &[class*="3:4"] {
                            aspect-ratio: 3 / 4;
                            
                        }
                        &[class*="2:3"] {
                            aspect-ratio: 2 / 3;
                            
                        }
                        &[class*="1:2"] {
                            aspect-ratio: 1 / 2;
                            
                        }
                        &[class*="4:3"] {
                            aspect-ratio: 4 / 3;
                            
                        }
                        &[class*="3:2"] {
                            aspect-ratio: 3 / 2;
                            
                        }
                        &[class*="16:9"] {
                            aspect-ratio: 16 / 9;
                            
                        }
                        &[class*="2:1"] {
                            aspect-ratio: 2 / 1;
                            
                        }
                        &[class*="1:1"] {
                            aspect-ratio: 1 / 1;
                            
                        }


                        &.video-library-videocontainer-video-horizontal {
                            // padding-bottom: 28.29%; 
                            width: calc(50% - 2px);
                        }

                        &.video-library-videocontainer-video-vertical {
                            // padding-bottom: 44.67%; 
                            width: calc(25% - 3px);
                        }

                        .relative-container {
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            cursor: pointer;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }

                            .video-js {
                                width: 100%;
                                height: 100%;
                                background: #100F11;
                                video {
                                    object-fit: contain
                                }

                                .vjs-big-play-button {
                                   display: none;
                                }
                                .vjs-control-bar {
                                    display: flex;
                                    background: rgba(0, 0, 0, 0.24);
                                    backdrop-filter: blur(10px);
                                    height: 34px;
                                    // opacity: 1!important;
                                }
                                .vjs-play-control {
                                    text-shadow: none!important;
                                }
                                .vjs-button > .vjs-icon-placeholder:before {
                                    line-height: 34px;
                                }
                                .vjs-progress-holder {
                                    height: 2px;
                                    .vjs-load-progress {
                                        
                                        background: transparent;
                                        display: none;
                                       
                                    }
                                }

                                .vjs-slider {
                                    background: rgba(255, 255, 255, 0.2);
                                }
                                .vjs-play-progress {
                                    &::before{
                                        content: '';
                                    }

                                }
                                .vjs-time-tooltip {
                                    display: none;
                                }
                                .vjs-current-time,
                                .vjs-duration,
                                .vjs-time-divider {
                                    display: block !important;
                                    line-height: 34px;
                                    padding: 0;
                                    font-family: Helvetica Neue;
                                    font-size: 12px; 
                                    color: rgba(255, 255, 255, 0.6);       
                                }
                                .vjs-time-divider {
                                    min-width: 0;
                                    div {width: 4px;}
                                    padding: 0 2px;
                                }

                            }
                        }
                       
                        
                       

                        .pedding-tag {
                            position: absolute;
                            width: 76px;
                            height: 34px;
                            border-radius: 2px;
                            background: rgba(0, 0, 0, 0.24);
                            backdrop-filter: blur(10px);
                            text-align: center;
                            line-height: 34px;
                            top: 10px;
                            right: 10px;
                            z-index: 40;
                        }

                        .fail-tag {
                            background: rgba(255, 0, 0, 0.24);

                        }

                        .re-generate-btn {
                            position: absolute;
                            font-size: 14px;
                            font-weight: normal;
                            line-height: 20px;
                            letter-spacing: normal;
                            color: #D8D8D8;
                            z-index: 99;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            cursor: pointer;
                        }

                       
                        &:hover {
                            .button-download-lick-delete-list{
                                opacity: 1;
            
                                &.islike {
                                    max-width: 112px;
                                    .delete-btn,.download-btn {
                                        display: block;
                                        width: 24px;
                                    }
                                }
                            }
                        }
                    }

                   
                   

                    .show-video-select-list {
                        position: absolute;
                        display: flex;
                        bottom: -43.33px;
                        .show-video-select-container {
                            width: 80px;
                            height: 33.33px;
                            margin-right:10px;
                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                cursor: pointer;
                                transition: all 0.3s ease-in;
                            
                            }
                        }
                    }
                }
                .video-detail {
                    width: calc(30% - 12px);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .before-icon {
                        margin-right: 8px;
                        display: flex;
                            justify-content: center;
                            align-items: center;
                        .before-icon-text {
                            background: #161417;
                            width: 24px;
                            height: 24px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            border-radius: 4px;
                        }

                        .before-icon-img {
                            width: 24px;
                            height: 24px;
                            margin-right: 2px;
                             border-radius: 4px;
                        }

                        .remaining-count {
                            display: block;
                            width: 24px;
                            height: 24px;
                            background: #161417;
                            font-family: Roboto;
                            font-size: 12px;
                            font-weight: 500;
                            line-height: 14px;
                            letter-spacing: normal;
                            color: #8D8D8F;
                            text-align: center;
                            line-height: 24px;

                        }
                    }
                    .image2video-icon {
                        .img-cover {
                            width: 20px;
                            height: 20px;
                            z-index: 0;
                            border-radius: 4px;
                            overflow: hidden;
                        }
                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }

                    .keyframe2video-icon {
                        display: flex;
                        .img-cover {
                            width: 24px;
                            height: 24px;
                            border-radius: 2px;
                            margin-right: 2px;
                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            
                            }
                        }
                        .img-cover:nth-child(2){
                            margin-right: 4px;
                        }
                    }
                    .video-detail-type{
                        display: flex;
                        height: 28px;
                       align-items: center;
                       margin-bottom: 12px;
                        .tag {
                            height: 28px;
                            line-height: 28px;
                            margin-left: 10px;
                            padding: 0 8px;
                            border-radius: 2px;
                            background: #150747;
                            color: $primary-text-color;
                            font-size: 12px;
                        }
                    }
                    .video-prompt {
                        padding-right: 0px;
                        line-height: 21px;
                        letter-spacing: normal;
                        color: #686B86;
                        margin-bottom: 12px;
                        
                    }

                    .tag-list {
                        display:flex;
                        margin-bottom: 16px;
                        p{
                            padding: 4px 6px;
                            font-size: 12px;
                            font-weight: normal;
                            line-height: 14px;
                            letter-spacing: normal;
                            color: #686B86;
                            background: #26262C;
                            margin-right: 4px;
                            border-radius: 4px;
                        }
                    }
                    .video-tool{
                        opacity: 0;
                        transition: all 0.3s ease;
                        display: flex;
                        button,.delete-btn {
                            border-radius: 4px;
                            background: #161417;
                            padding: 4px 8px;
                            gap: 4px;
                            height: 34px;
                            line-height: 20px;
                            margin-right: 10px;
                            color: $gray;
                            display: flex;
                            align-items: center;
                            margin-right: 10px;
                            cursor: pointer;
                            img {
                                width: 16px;
                                height: 16px;
                            }
                          
                        }
                        .video-tool-generate {
                            display: flex;
                            border-radius: 2px;
                            background: #161417;
                            margin-right: 10px;
                            align-items: center;
                            .video-tool-generate-button {
                                // padding-right: 0;
                                margin-right: 0;
                               
                            }
                            span {
                                margin: 0 10px;
                                color: #262627;
                            }
                            .num-select {
                                margin-bottom: 0;
                                height: 34px;

                                .select__control {
                                    min-height: 34px;
                                    background-color:#161417;
                                    .select__value-container {
                                        padding: 2px 4px;
                                        width: 20px;
                                    }
                                    .select__dropdown-indicator {
                                        padding: 0;
                                        padding-right: 8px;
                                        padding-left: 2px;
                                    }
                                }
                               
                            }
                        }
                    }
                    &:hover {
                        .video-tool {
                            opacity: 1;
                        }
                    }
                }
               
                @media (max-width: 1240px) {
                   flex-direction: column;
                   
                   .video-library-videocontainer {
                    width: 100%;
                    .video-library-videocontainer-video.video-library-videocontainer-video-vertical{
                        width: calc(50% - 4px);
                    }
                   }
                   .video-detail {
                    width: 100%;
                    margin-top: 20px;
                   }
                  }
            }
            
        }
        
        .video-pic-list {
            width: 64px;
            height: 100%;
            overflow: scroll;
            .video-pic-item-bg {
                cursor: pointer;
                width: 64px;
                height: 64px;
                margin-bottom: 4px;
                border-radius: 2px;
                box-sizing: border-box;
                background: #161417;
                border: 0.64px solid #161417;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                .video-pic-item-container {
                    width: 60px;
                    height: 60px;
                    border-radius: 2px;
                    overflow: hidden;
                    display: flex;
                    img {
                        width: 100%;
                        object-fit: cover;
                        height: 100%;
                    }
                    .keyframeimgcontainer {
                        width: 29px;
                        height: 60px;
                        border-radius: 2px;
                        &:nth-child(2) {
                            margin-left: 4px;
                        }

                        img {
                            width: 100%;
                            object-fit: cover;
                            height: 100%;
                        }
                    }

                    .gradient-bg {
                        width: 60px;
                        height: 60px;
                        top: 1px;
                        left: 1px;
                        border-radius: 2px;
                    }
                }
                .video-pic-creatnum {
                    position: absolute;
                    width: 18px;
                    height: 18px;
                    /* 自动布局 */
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 2px;
                    background: rgba(0, 0, 0, 0.24);
                    color: #fff;
                    bottom: 8px;
                    right: 6px;


                }

                &:hover,&.video-pic-item-bg-active {
                    border-color: $primary-color;
                }
            }
        }
        
    }

   

    .video-library-empty {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        // justify-content: center;
        flex-direction: column;
        padding-top: 240px;

        .img-grid-container {
            display: grid;
            grid-template-columns:repeat(3, 1fr);
            gap: 2px;
            width:124px;
            height: 124px;
            position: relative;
             .img-grid-item {
                aspect-ratio: 1;
                overflow: hidden;
                display: flex;
                justify-content: center;
                align-items:center;
                width: 40px;
                height: 40px;
                background: #100F11;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;

                }
             }

             .animation-text {
                position: absolute;
                text-wrap: nowrap;
                display: flex;
                left: 0;
                bottom: 0;
                top: 150px;

                img {
                    width: 124.45px;
                    height: 24px;   
                    margin-right: 8.55px;    
                }

                .text-container {
                    position: absolute;
                    height: 24px;
                    width: 124.45px;
                    overflow: hidden;
                    margin-bottom: 8px;
                    left: 0;
                }
              
                .current-text, .next-text {
                    position: absolute;
                    width: 100%;
                    text-align: center;
                    transition: transform 0.5s ease-in-out;
                    font-family: Helvetica Neue;
                    font-size: 16px;
                    font-weight: bold;
                    line-height: 20px;
                    text-align: center;
                    letter-spacing: normal;
                    color: #4C1BFF;
                    top:1px;
                }
    
                .current-text {
                    transform: translateY(0);
                } 
                .next-text {
                    transform: translateY(100%);
                }          

             }
        }
    }
}


